<template>
  <div class="fuwenben">
    <div id="div1" style="width: 100%; color: #000;"></div>
  </div>
</template>

<script>
  import * as qiniu from 'qiniu-js'
  import E from "wangeditor"
  export default {
    name: 'fuwenben',
    props:['content'],
    data() {
      return {
        content:""
      }
    },
    created() {

    },
    beforeDestroy() {

    },
    mounted() {
      var that = this
      const editor = new E("#div1")
      editor.config.height = 250
      editor.config.colors = [
          '#000000',
          '#eeece0',
          '#1c487f',
          '#4d80bf'
      ]
      editor.config.uploadImgServer = '/upload'
      editor.config.showLinkImg = false
      editor.config.onchange = function(html) {
      	that.content = html
        that.$emit('getcontent',html)
      }
      editor.config.customUploadImg = function(files, insert) {

        let name = that.getRandomChar() + '.' + files[0].name.split('.')[1]
        let obj = new FormData()
        obj.append('name',name)
        obj.append('file',files[0])
        axios.post(`/admin/pic/upload`,obj).then(response => {
          if(response.data.msg.code == 0){
            insert(location.origin + response.data.data)
          }else{
            that.$message.error(response.data.msg.info);
          }
        })

        // let name = that.getRandomChar() + '.' + files[0].name.split('.')[1]

        // axios.post(`/api/qiniu/uploadtoken`,{name:name})
        //   .then(response => {
        //     if(response.data.msg.code == 0){

        //       const observer = {
        //         next(res){
        //           console.log(res)
        //           // ...
        //         },
        //         error(err){
        //           console.log(err)
        //           // ...
        //         },
        //         complete(res){
        //           insert('https://gperson.gantanhaokeji.top/'+ res.key)
        //         }
        //       }

        //       const options = {
        //         maxWidth: 1000,
        //       }

        //       qiniu.compressImage(files[0], options).then(data => {
        //         const observable = qiniu.upload(data.dist,name, response.data.data.token, {}, {})
        //         const subscription = observable.subscribe(observer) // 上传开始
        //       })


        //     }else{
        //       this.$message.error(response.data.msg.info);
        //     }
        //   });
      }
      editor.create()

      if(this.content){
        editor.txt.html(this.content)
      }

    },
    methods: {
      getRandomChar:function(len = 11)  {
        var  x = "0123456789qwertyuioplkjhgfdsazxcvbnm" // 需要什么字符这里添加
        var  tmp = ""
        var timestamp = new Date().getTime();
        for(var  i=0;i<len;i++)  {
          tmp += x.charAt(Math.ceil(Math.random()*100000000)%x.length);
        }
        return  timestamp+tmp;
      },
      // fabu: function() {
      // 	this.ing = true
      // 	axios.post(`${this.url}/admin/addarticle`,this.all)
      // 	  .then(response => {
      // 	    this.ing = false
      // 	    if(response.data.code == 0){
      //         this.$message.success('发布成功');
      // 	    }else{
      //         this.$message.error(response.data.msg.info);
      //       }
      // 	  })
      // },
    }
  }
</script>


<style scoped lang="less">
  .wenzhang_add{

  }
</style>
